<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>查询客房页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/cookie.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .more {
            font-size: 16px;
            display: block;
            width: 19px;
            height: 19px;
            text-align: center;
            line-height: 20px;
            border: 1px solid #ccc;
            border-radius: 2px;
            margin: 5px auto;
        }

        .close {
            display: none;
        }

        .detail {
            font: 16px/1.5 "Microsoft Yahei";
            text-align: left;
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">刷新</i></a>
</div>

<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12  layui-form-pane" id="search">
            <div class="layui-form-item" id="x-city">

                <div class="layui-input-inline">
                    <input type="number" name="id" id="id" placeholder="订单编号" autocomplete="off"
                           class="layui-input" >
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="预订日期" name="reservationTime" id="reservationTime"
                           autocomplete="off">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="预计退房" name="goTime" id="goTime" autocomplete="off">
                </div>
                <button type="button" class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
            </div>
        </form>
        <div style="display: none;">
            <ul id="valuestack">

            </ul>
        </div>
        <table class="layui-table" id="r_table" lay-filter="test">
        </table>
        <div class="page">
            <div>
                <a class="prev" href="">&lt;&lt;</a>
                <a class="num" href="">1</a>
                <span class="current">2</span>
                <a class="num" href="">3</a>
                <a class="num" href="">489</a>
                <a class="next" href="">&gt;&gt;</a>
            </div>
        </div>
    </div>
</div>
<!--订单详情界面-->
<div class="layui-row" id="reserveDetail" style="display: none">
    <table id="detailTable" class="layui-table" lay-filter="more"></table>
</div>

</div>
<script>
    window.onload = function () {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#reservationTime' //指定元素
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#goTime' //指定元素
            });
        });
        //获取表格中指定列的值传递给新修改弹窗
        layui.use(['layer', 'table', 'form', 'jquery', 'element'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                form = layui.form,
                element = layui.element;
            var table = layui.table;
            //根据返回的房间类型设置下拉框中房间类型的值
            var roomType;
            $.get({
                url: '/roomType/list',
                dataType: 'json',
                success: function (res) {
                    // console.log(res);
                    roomType = res.data;
                    var selectType = $("#roomType");
                    roomType.forEach(function (ele, index) {
                        var option = $('<option></option>');
                        //如果该类型在下拉框中没有，则添加
                        if ($('#roomType option[value=' + ele['id'] + ']').length == 0) {
                            option.val(ele['id']);
                            option.text(ele['roomType']);
                            option.appendTo(selectType);
                        }
                        form.render('select');
                    });

                }
            });
            var tableRender ={
                id: 'tableId'
                , elem: '#r_table'
                , height: 400
                , url: '/reserve/list' //数据接口
                , toolbar: '#toolbarDemo'
                , parseData: function (res) {
                    var data = res.data;
                    //处理状态，转编号为文字
                    for (var index in data) {
                        switch (data[index]["delStatus"]) {
                            case 0:
                                data[index]["delStatus"] = "预订";
                                break;
                            case 1:
                                data[index]["delStatus"] = "完成";
                                break;
                            case 2:
                                data[index]["delStatus"] = "退订";
                                break;

                        }
                    }
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": data //解析数据列表
                    }
                }
                , page: true //开启分页
                , cols: [
                    [ //表头
                        {type: 'checkbox', width: "5%", fixed: 'left'},
                        {field: 'id', title: '订单编号', width: '10%', sort: true, fixed: 'left', align: 'center'}
                        , {field: 'reservationTime', title: '预订日期', width: '14%', sort: true, align: 'center'}
                        , {field: 'goTime', title: '预计退房', width: '14%', align: 'center'}
                        , {field: 'delStatus', title: '订单状态', width: '10%', align: 'center'}
                        , {field: 'remark', title: '备注', width: '11%', align: 'center'}
                        , {field: 'phone', title: '联系方式', width: '14%', align: 'center'}
                        , {field: 'reserveEdit', title: '操作', toolbar: '#edit', width: '22%', align: 'center'}
                    ]
                ]
                , done: function (res, curr, count) {
                    // spanTable(res);
                    // spanT(oldData, 4, 5)
                    table.on('tool(test)', function (obj) {
                        //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                        //console.log(obj);
                        var data = obj.data; //获得当前行数据
                        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                        var delStatus;
                        switch (data["delStatus"]) {
                            case "预订":
                                delStatus = 0;
                                break;
                            case "完成":
                                delStatus = 1;
                                break;
                            case "退订":
                                delStatus = 2;
                                break;
                        }
                        //获取当前房间类型
                        var curType = data['rtid'];
                        $("#selectValue").val(delStatus);
                        //当前选中行对应的房间类型
                        $("#curRoomType").val(curType);
                        //当要触发修改事件的时候，传递data数据
                        if (layEvent == "edit") {
                            editRoom('修改', '/reserve/reserveEdit', 1000, 500, data);
                        } else if (layEvent == 'detail') {
                            reserveDetail('订单详情',400,400,data.reserveTypes)
                        }else if(layEvent == "checkIn"){
                            checkIn('入住', '/reserve/reserveCheckIn', 1000, 500, data);
                        }
                        else if (layEvent == 'del') { //删除
                            layer.confirm('确定删除吗？', function (index) {
                                console.log("remove data:",data);
                                $.post("/reserve/remove", {'phoneIds': data.phone}, function (res) {
                                    if (res.status == 0) {
                                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                        layer.alert("删除成功", {icon: 6})
                                    } else {
                                        layer.alert("删除失败", {icon: 5})
                                    }
                                });
                                layer.close(index);
                                //向服务端发送删除指令
                            });
                        }
                    });
                }

            }
            //渲染表格
            var tableIns = table.render(tableRender);
            form.on('submit(search)', function (data){
                tableIns.reload({
                    where:data.field
                });

            });
            //修改房间信息弹窗
            function editRoom(title, url, w, h, data) {
                //data为选中行的房间信息
                if (title == null || title == '') {
                    title = false;
                }
                ;
                if (url == null || url == '') {
                    url = "404.html";
                }
                ;
                if (w == null || w == '') {
                    w = ($(window).width() * 0.9);
                }
                ;
                if (h == null || h == '') {
                    h = ($(window).height() - 50);
                }
                ;
                var index = layer.open({
                    type: 2,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: title,
                    content: url,
                    success: function (layero, index) {
                        //在新窗口保留之前的值，在有值的基础上修改,body为子窗口
                        var body = layer.getChildFrame('body', index);
                        //表格渲染后获取指定行数据
                        body.find("#id").val(data["id"]);
                        body.find("#reservationTime").val(data["reservationTime"]);
                        body.find("#goTime").val(data["goTime"]);
                        body.find("#remark").val(data["remark"]);
                        body.find("#phone").val(data["phone"]);
                    }
                });
            }
            //查看订单详情弹窗
            function reserveDetail(title, w, h, data) {
                if (title == null || title == '') {
                    title = false;
                }
                ;
                if (w == null || w == '') {
                    w = ($(window).width() * 0.9);
                }
                ;
                if (h == null || h == '') {
                    h = ($(window).height() - 50);
                }
                ;
                var index = layer.open({
                    type: 1,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: title,
                    content: $('#reserveDetail'),
                    success: function (layero, index) {
                        //在新窗口保留之前的值，在有值的基础上修改,body为子窗口
                        var tableId = table.render({
                            id: 'detailTable'
                            , elem: '#detailTable'
                            , height: 400
                            , data:data
                            , page: false //开启分页
                            , cols: [
                            [ //表头
                                {field: 'roomType', title: '房间类型', width: '50%', sort: true,fixed: 'left',align: 'center'},
                                {field: 'orderNum', title: '预订数量', width: '50%', sort: true, fixed: 'left', align: 'center'}
                        ]]
                        })
                    }
                });
            }
            //入住弹窗
            function checkIn(title, url,w, h, data) {
                //data为选中行的房间信息
                if (title == null || title == '') {
                    title = false;
                }
                ;
                if (w == null || w == '') {
                    w = ($(window).width() * 0.9);
                }
                ;
                if (h == null || h == '') {
                    h = ($(window).height() - 50);
                }
                ;
                //处理data的房间类型放入valuestack
                var reserveTypes = data.reserveTypes;
                console.log('reserveTypes',reserveTypes);
                var valuestack = $('#valuestack');
                valuestack.find('li').remove();
                $.each(reserveTypes,function (index,ele) {
                    valuestack.append($('<li></li>').text(ele['roomType'])
                        .attr('orderNum',ele['orderNum'])
                    );
                });
                var index = layer.open({
                    type: 2,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: title,
                    content: url,
                    success: function (layero, index) {
                        console.log('data',data);
                        //在新窗口保留之前的值，在有值的基础上修改,body为子窗口
                        var body = layer.getChildFrame('body', index);
                        //表格渲染后获取指定行数据
                        body.find("#orderDate").val(data["reservationTime"]);
                        body.find("#leaveDate").val(data["goTime"]);
                        body.find("#remark").val(data["remark"]);
                        body.find("#phone").val(data["phone"]);
                        body.find("#reserveId").val(data["id"]);
                    }
                });
            }
            table.on("toolbar(test)", function (obj) {
                console.log(obj);
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event == 'delAll') {
                    layer.confirm('确定删除吗？', function () {
                        var arr = [];
                        console.log(checkStatus);
                        $.each(checkStatus.data, function (idx, obj) {
                            //获得所有id
                            arr.push(obj.roomNumber);
                        });
                        // 异步操作
                        $.post("/roomDetail/remove", {'ids': arr.toString()}, function (res) {
                            if (res.status == 0) {
                                layer.msg("删除成功", {icon: 5})
                                tableIns.reload();
                            } else {
                                layer.alert("修改失败", {icon: 5})
                            }
                        });
                        layer.close(index);
                    })
                } else if (obj.event == 'addReserve') {
                    add("增添预订", 1000, 500, "/reserve/reserveAdd2");
                }
            });

            //增加房间信息弹窗
            function add(title, w, h, url, roomType) {
                if (title == null || title == '') {
                    title = false;
                }
                ;
                if (url == null || url == '') {
                    url = "404.html";
                }
                ;
                if (w == null || w == '') {
                    w = ($(window).width() * 0.9);
                }
                ;
                if (h == null || h == '') {
                    h = ($(window).height() - 50);
                }
                ;
                layer.open({
                    type: 2,
                    area: [w + "px", h + "px"],
                    fix: false,
                    shade: 0.3,
                    title: title,
                    shadeClose: true,//点击遮罩层关闭
                    content: url,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);

                    },
                    end: function () {
                        //层被销毁后刷新页面
                        location.reload();
                    }

                });
        }
    })};


</script>
<script type="text/html" id="edit">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="checkIn">入住</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" lay-event="addReserve">添加订单</button>
    </div>
</script>
<!--折叠面板-->
<script type="text/html" id="more">
    <span class="more open" lay-event="detail">+</span>
    <span class="more close" lay-event="cloDetail">-</span>
</script>
</body>

</html>